<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 家計簿　</title>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/category.js"></script>
    <script type="text/javascript" src="js/abstract_list.js"></script>
    <script type="text/javascript" src="js/reserve_list.js"></script>
    <script type="text/javascript" src="js/table.js"></script>
    <link href="css/account.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
    <!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css"/>
    <![endif]-->
  </head>
  <body>
    {% include "_menu.html" %}
    <span style="color:red;">毎月１日に予約登録されている内容がその月の家計簿に登録されます。</span>
    <form id="account" action="/" method="post">
      <div id="top_form">
        <div>
          <span class="title">毎月</span>
          <select name="day" id="account_day">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
          </select>
          <span class="title">日</span>
        </div>
        <div>
          <span class="title" id="items_span"></span>
        </div>
        <div id="price_div">
          <span class="title">金額</span>
          <input type="text" name="price" id="account_price" size="30" style="{ime-mode : disabled}"/>
          <input type="button" tabindex=-1 value="計算" onclick="calculate();return false;"/>
          <br>
          <span class="mini">+(足す)-(引く)*(掛ける)/(割る)()カッコを使って計算を押すと計算結果に変わります</span>
        </div>
      </div>
      <div class="bottom"><span class="title">内容</span>
        <input type="text" size="100" id="account_content" name="content" style="vertical-align:top"/>
      </div>
      <input type="submit" style="margin-left:25px;margin-top:10px;" value="登録" onclick="return dataSend()"/>
    </form>
    <div id="reserveTable"></div>
    <hr/>
    <div id="account_sum"></div>
    <script type="text/javascript">
      function calculate()
      {
        if($F('account_price').match(/^[\d\.\+\-\*\/()]+$/))
        {
          var result;
          eval("result="+$F('account_price'));
          $('account_price').value=parseInt(result,10);
        }
        else
        {
          alert("計算式として認識できない文字があります。");
        }
      }
      function dataSend()
      {
        if($F("category")==null)
        {
          alert("項目が選択されていません。");
          return false;
        }
        if($F("account_price")=="")
        {
          alert("金額が入力されていません。");
          return false;
        }
        if($F("account_price").match(/\D/))
        {
          alert("金額に数字以外の文字が含まれています");
          return false;
        }
        if(!$F("account_content"))
        {
          alert("内容が記載されていません。")
            return false;
        }
        var a = new Ajax.Request( 
            "/addDayReserve", 
            { 
            "method": "post", 
            "parameters": Form.serialize("account"), 
            onSuccess: function(request) { 
            $('account_content').value=""
            $('account_price').value=""
            $('account_day').value=""
            reserveData = new ReserveList({call_back:makeTable});
            }, 
            onFailure: function(request) { 
              alert('読み込みに失敗しました'); 
            }, 
            onException: function (request) { 
              alert('読み込み中にエラーが発生しました'); 
            } 
            }); 
        return false;
      }
      var reserveData = null;
      var reserveTable = null;
      function makeTable(dataSet){
        reserveTable = new SortableTable({id:'reserveTable',data_set:dataSet,block_num:20,call_back:add_observe});
        $('account_sum').update("合計:"+ myFormatNumber(reserveData.sum) + "円");
      }
      function add_observe(){
        reserveData.addObserve();
      }
      document.observe('dom:loaded',function(){
          categoryData = new CategoryData('items_span',"init");
          reserveData = new ReserveList({call_back:makeTable});
          $('account_price').select();
          });
</script>
</body>
</html>
